<template>
  <div class="inventory-view">
    <h2>库存查看</h2>
    <el-form :inline="true" class="search-form">
      <el-form-item label="生鲜名称">
        <el-input v-model="searchName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="储位">
        <el-select v-model="searchStorage" placeholder="请选择储位">
          <el-option label="全部" value="" />
          <el-option v-for="storage in storages" :key="storage.id" :label="storage.name" :value="storage.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchInventoryList">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="inventoryList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="name" label="生鲜名称" width="120" align="center" />
      <el-table-column prop="storageName" label="储位名称" width="120" align="center" />
      <el-table-column prop="type" label="种类" width="120" align="center" />
      <el-table-column prop="inventory" label="库存(KG)" width="120" align="center" />
      <el-table-column prop="warningStatus" label="预警状态" width="120" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { get } from '@/api/api';

const searchName = ref('');
const searchStorage = ref('');
const storages = ref([]);
const inventoryList = ref([]);

// 获取储位列表
const fetchStorages = async () => {
  try {
    const res = await get('/storage/list');
    if (res && res.data) {
      storages.value = res.data;
    }
  } catch (error) {
    console.error('获取储位列表失败:', error);
    ElMessage.error('获取储位列表失败');
  }
};

// 获取库存列表
const fetchInventoryList = async () => {
  try {
    const res = await get('/freshFood/inventory/list', {
      name: searchName.value,
      storageId: searchStorage.value
    });
    if (res && res.data) {
      inventoryList.value = res.data;
    }
  } catch (error) {
    console.error('获取库存列表失败:', error);
    ElMessage.error('获取库存列表失败');
  }
};

// 重置搜索条件
const resetSearch = () => {
  searchName.value = '';
  searchStorage.value = '';
  fetchInventoryList();
};

onMounted(() => {
  fetchStorages();
  fetchInventoryList();
});
</script>

<style scoped>
.inventory-view {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}
</style>